{% include "data/template-ui.html" %}
<link rel="stylesheet" type="text/css" href="/static/css/icons.css" />
<link rel="stylesheet" type="text/css" href="/static/css/fonts.css" />
<link rel="stylesheet" type="text/css" href="/static/css/sweetalert.css" />
<link rel="stylesheet" type="text/css" href="/static/css/switchery.min.css" />
<link rel="stylesheet" type="text/css" href="/static/css/datatables/foundation.min.css" />
<link href="/static/cron/css/easyui.min.css" rel="stylesheet" type="text/css" />
<link href="/static/cron/css/icon.css" rel="stylesheet" type="text/css" />

<style>
    .container-fluid {
        height: 100%;
        padding: 15px;
    }

    .container-fluid .card {
        height: 100%;
        margin: 0;
    }

    .table {
        font-size: 14px;
    }
    .table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {
        line-height: unset;
    }
    tbody tr td {
        text-align: left;
    }
    h6 {
        color: rgb(0,128,82);
    }
    .modal-dialog {
        width: 1000px;
        max-width: 100%;
        margin-top: 50px;
    }
    .modal-body {
        padding: 15px 40px;
    }
    .form-group {
        display: flex;
    }
    .form-group label {
        width: 140px;
        margin-bottom: 0;
    }
    .modal-body .line {
        height: 25px;
        line-height: 25px;
        margin: 3px;
    }
    .modal-body .imp {
        padding-left: 25px;
    }
    .modal-body .col {
        width: 95px;
    }
    .modal-body ul {
        list-style:none;
        padding-left:10px;
    }
    .modal-body li {
        height:20px;
    }
    .easyui-tabs, .tabs-panels {
        width: 100% !important;
        height: 100% !important;
    }
    .tabs-header, .tabs-wrap, .tabs, .panel-body {
        width: 100% !important;
    }
    input:disabled, input[readonly], textarea:disabled, textarea[readonly] {
        background-color: unset !important;
        cursor: text !important;
    }
</style>

<div class="container-fluid animated fadeInUp">
    <div class="card">
            <div class="card-title">
                <h4 class="text-primary">后台任务 - 调度信息</h4>
                <button class="btn btn-primary btn-sm" data-toggle="modal" style="margin-left: 50px"
                        data-target="#myModal" type="button" onclick="openDialog(this, '新建');">
                    <i class="im-plus"></i>
                    新 建
                </button>
            </div>
            <div class="card-content">
                <table class="table table-hover">
                    <thead>
                    <td>任务名</td>
                    <td>任务id</td>
                    <td>启用状态</td>
                    <td>执行函数</td>
                    <td>下次执行时间</td>
                    <td>调度周期</td>
                    <td>操作</td>
                    </thead>
                    <tbody>
                    {% for i in jobs %}
                    <tr>
                        <!-- 任务名 -->
                        <td>{{ i.name }}</td>
                        <!-- 任务id -->
                        <td>{{ i.id }}</td>
                        <!-- 启用状态 -->
                        <td>
                            {% if i.status == True %}
                            <input class="js-switch" job_id="{{ i.id }}" type="checkbox" checked/>
                            {% elif i.status == False %}
                            <input class="js-switch" job_id="{{ i.id }}" type="checkbox"/>
                            {% endif %}
                        </td>
                        <!-- 任务内容 -->
                        <td>{{ i.func_ref }}</td>
                        <!-- 下次执行时间 -->
                        <td>{{ i.next_run_time }}</td>
                        <!-- 调度周期 -->
                        <td>{{ i.trigger }}</td>
                         <!--操作 -->
                        <td>
                            <a href="javascript:void(0)" onclick="openDialog(this, '编辑')"
                               style="margin-right:5px;border-bottom: 1px dotted;"
                               data-toggle="modal" data-target="#myModal"
                               job_id="{{ i.id }}" job_name="{{i.name}}" job_func="{{i.func_ref}}" job_trigger="{{i.trigger}}">
                               编辑
                             </a>
                            <a href="javascript:void(0)" onclick="deleteJob('{{ i.id }}')"
                               style="margin-left:5px;border-bottom: 1px dotted;">
                                删除
                            </a>
                        </td>
                    </tr>
                    {% endfor%}
                    </tbody>
                </table>
            </div>
        </div>
</div>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="modal-title">新建</h4>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>

            </div>
            <div class="modal-body">
                <form class="navbar-form" style="background: #fff;padding: 10px;">
                    <div class="form-group">
                        <label>任务id【定时调度质检模型时，配置质检模型对应的"项目编号"】：</label>
                        <input name="id" type="text" class="form-control" autocomplete="off">
                    </div>
                    <div class="form-group">
                        <label>任务名：</label>
                        <input name="name" type="text" class="form-control" autocomplete="off">
                    </div>
                    <div class="form-group">
                        <label>执行函数名(已存在可调用的函数invoke_job[0-9])：</label>
                        <input name="func" type="text" class="form-control" autocomplete="off">
                    </div>
                    <div id="modal-cron">
                        <div class="easyui-layout" style="width:920px; height:560px; border: 1px rgb(202, 196, 196) solid;border-radius: 5px;">
                            <div style="height: 100%;">
                                <div class="easyui-tabs" data-options="fit:true,border:false">
                                    <div title="秒">
                                        <div class="line">
                                            <input type="radio" checked="checked" name="second" onclick="everyTime(this)">
                                            每秒 允许的通配符[, - * /]</div>
                                        <div class="line">
                                            <input type="radio" name="second" onclick="cycle(this)">
                                            周期从
                                            <input class="numberspinner" style="width: 60px;" data-options="min:1,max:58" value="1"
                                                   id="secondStart_0">
                                            -
                                            <input class="numberspinner" style="width: 60px;" data-options="min:2,max:59" value="2"
                                                   id="secondEnd_0">
                                            秒</div>
                                        <div class="line">
                                            <input type="radio" name="second" onclick="startOn(this)">
                                            从
                                            <input class="numberspinner" style="width: 60px;" data-options="min:0,max:59" value="0"
                                                   id="secondStart_1">
                                            秒开始,每
                                            <input class="numberspinner" style="width: 60px;" data-options="min:1,max:59" value="1"
                                                   id="secondEnd_1">
                                            秒执行一次</div>
                                        <div class="line">
                                            <input type="radio" name="second" id="sencond_appoint">
                                            指定</div>
                                        <div class="imp secondList">
                                            <input type="checkbox" value="0">00
                                            <input type="checkbox" value="1">01
                                            <input type="checkbox" value="2">02
                                            <input type="checkbox" value="3">03
                                            <input type="checkbox" value="4">04
                                            <input type="checkbox" value="5">05
                                            <input type="checkbox" value="6">06
                                            <input type="checkbox" value="7">07
                                            <input type="checkbox" value="8">08
                                            <input type="checkbox" value="9">09
                                        </div>
                                        <div class="imp secondList">
                                            <input type="checkbox" value="10">10
                                            <input type="checkbox" value="11">11
                                            <input type="checkbox" value="12">12
                                            <input type="checkbox" value="13">13
                                            <input type="checkbox" value="14">14
                                            <input type="checkbox" value="15">15
                                            <input type="checkbox" value="16">16
                                            <input type="checkbox" value="17">17
                                            <input type="checkbox" value="18">18
                                            <input type="checkbox" value="19">19
                                        </div>
                                        <div class="imp secondList">
                                            <input type="checkbox" value="20">20
                                            <input type="checkbox" value="21">21
                                            <input type="checkbox" value="22">22
                                            <input type="checkbox" value="23">23
                                            <input type="checkbox" value="24">24
                                            <input type="checkbox" value="25">25
                                            <input type="checkbox" value="26">26
                                            <input type="checkbox" value="27">27
                                            <input type="checkbox" value="28">28
                                            <input type="checkbox" value="29">29
                                        </div>
                                        <div class="imp secondList">
                                            <input type="checkbox" value="30">30
                                            <input type="checkbox" value="31">31
                                            <input type="checkbox" value="32">32
                                            <input type="checkbox" value="33">33
                                            <input type="checkbox" value="34">34
                                            <input type="checkbox" value="35">35
                                            <input type="checkbox" value="36">36
                                            <input type="checkbox" value="37">37
                                            <input type="checkbox" value="38">38
                                            <input type="checkbox" value="39">39
                                        </div>
                                        <div class="imp secondList">
                                            <input type="checkbox" value="40">40
                                            <input type="checkbox" value="41">41
                                            <input type="checkbox" value="42">42
                                            <input type="checkbox" value="43">43
                                            <input type="checkbox" value="44">44
                                            <input type="checkbox" value="45">45
                                            <input type="checkbox" value="46">46
                                            <input type="checkbox" value="47">47
                                            <input type="checkbox" value="48">48
                                            <input type="checkbox" value="49">49
                                        </div>
                                        <div class="imp secondList">
                                            <input type="checkbox" value="50">50
                                            <input type="checkbox" value="51">51
                                            <input type="checkbox" value="52">52
                                            <input type="checkbox" value="53">53
                                            <input type="checkbox" value="54">54
                                            <input type="checkbox" value="55">55
                                            <input type="checkbox" value="56">56
                                            <input type="checkbox" value="57">57
                                            <input type="checkbox" value="58">58
                                            <input type="checkbox" value="59">59
                                        </div>
                                    </div>
                                    <div title="分钟">
                                        <div class="line">
                                            <input type="radio" checked="checked" name="min" onclick="everyTime(this)">
                                            分钟 允许的通配符[, - * /]</div>
                                        <div class="line">
                                            <input type="radio" name="min" onclick="cycle(this)">
                                            周期从
                                            <input class="numberspinner" style="width: 60px;" data-options="min:1,max:58" value="1"
                                                   id="minStart_0">
                                            -
                                            <input class="numberspinner" style="width: 60px;" data-options="min:2,max:59" value="2"
                                                   id="minEnd_0">
                                            分钟</div>
                                        <div class="line">
                                            <input type="radio" name="min" onclick="startOn(this)">
                                            从
                                            <input class="numberspinner" style="width: 60px;" data-options="min:0,max:59" value="0"
                                                   id="minStart_1">
                                            分钟开始,每
                                            <input class="numberspinner" style="width: 60px;" data-options="min:1,max:59" value="1"
                                                   id="minEnd_1">
                                            分钟执行一次</div>
                                        <div class="line">
                                            <input type="radio" name="min" id="min_appoint">
                                            指定</div>
                                        <div class="imp minList">
                                            <input type="checkbox" value="0">00
                                            <input type="checkbox" value="1">01
                                            <input type="checkbox" value="2">02
                                            <input type="checkbox" value="3">03
                                            <input type="checkbox" value="4">04
                                            <input type="checkbox" value="5">05
                                            <input type="checkbox" value="6">06
                                            <input type="checkbox" value="7">07
                                            <input type="checkbox" value="8">08
                                            <input type="checkbox" value="9">09
                                        </div>
                                        <div class="imp minList">
                                            <input type="checkbox" value="10">10
                                            <input type="checkbox" value="11">11
                                            <input type="checkbox" value="12">12
                                            <input type="checkbox" value="13">13
                                            <input type="checkbox" value="14">14
                                            <input type="checkbox" value="15">15
                                            <input type="checkbox" value="16">16
                                            <input type="checkbox" value="17">17
                                            <input type="checkbox" value="18">18
                                            <input type="checkbox" value="19">19
                                        </div>
                                        <div class="imp minList">
                                            <input type="checkbox" value="20">20
                                            <input type="checkbox" value="21">21
                                            <input type="checkbox" value="22">22
                                            <input type="checkbox" value="23">23
                                            <input type="checkbox" value="24">24
                                            <input type="checkbox" value="25">25
                                            <input type="checkbox" value="26">26
                                            <input type="checkbox" value="27">27
                                            <input type="checkbox" value="28">28
                                            <input type="checkbox" value="29">29
                                        </div>
                                        <div class="imp minList">
                                            <input type="checkbox" value="30">30
                                            <input type="checkbox" value="31">31
                                            <input type="checkbox" value="32">32
                                            <input type="checkbox" value="33">33
                                            <input type="checkbox" value="34">34
                                            <input type="checkbox" value="35">35
                                            <input type="checkbox" value="36">36
                                            <input type="checkbox" value="37">37
                                            <input type="checkbox" value="38">38
                                            <input type="checkbox" value="39">39
                                        </div>
                                        <div class="imp minList">
                                            <input type="checkbox" value="40">40
                                            <input type="checkbox" value="41">41
                                            <input type="checkbox" value="42">42
                                            <input type="checkbox" value="43">43
                                            <input type="checkbox" value="44">44
                                            <input type="checkbox" value="45">45
                                            <input type="checkbox" value="46">46
                                            <input type="checkbox" value="47">47
                                            <input type="checkbox" value="48">48
                                            <input type="checkbox" value="49">49
                                        </div>
                                        <div class="imp minList">
                                            <input type="checkbox" value="50">50
                                            <input type="checkbox" value="51">51
                                            <input type="checkbox" value="52">52
                                            <input type="checkbox" value="53">53
                                            <input type="checkbox" value="54">54
                                            <input type="checkbox" value="55">55
                                            <input type="checkbox" value="56">56
                                            <input type="checkbox" value="57">57
                                            <input type="checkbox" value="58">58
                                            <input type="checkbox" value="59">59
                                        </div>
                                    </div>
                                    <div title="小时">
                                        <div class="line">
                                            <input type="radio" checked="checked" name="hour" onclick="everyTime(this)">
                                            小时 允许的通配符[, - * /]</div>
                                        <div class="line">
                                            <input type="radio" name="hour" onclick="cycle(this)">
                                            周期从
                                            <input class="numberspinner" style="width: 60px;" data-options="min:0,max:23" value="0"
                                                   id="hourStart_0">
                                            -
                                            <input class="numberspinner" style="width: 60px;" data-options="min:2,max:23" value="2"
                                                   id="hourEnd_0">
                                            小时</div>
                                        <div class="line">
                                            <input type="radio" name="hour" onclick="startOn(this)">
                                            从
                                            <input class="numberspinner" style="width: 60px;" data-options="min:0,max:23" value="0"
                                                   id="hourStart_1">
                                            小时开始,每
                                            <input class="numberspinner" style="width: 60px;" data-options="min:1,max:23" value="1"
                                                   id="hourEnd_1">
                                            小时执行一次</div>
                                        <div class="line">
                                            <input type="radio" name="hour" id="hour_appoint">
                                            指定</div>
                                        <div class="imp hourList">
                                            AM:
                                            <input type="checkbox" value="0">00
                                            <input type="checkbox" value="1">01
                                            <input type="checkbox" value="2">02
                                            <input type="checkbox" value="3">03
                                            <input type="checkbox" value="4">04
                                            <input type="checkbox" value="5">05
                                            <input type="checkbox" value="6">06
                                            <input type="checkbox" value="7">07
                                            <input type="checkbox" value="8">08
                                            <input type="checkbox" value="9">09
                                            <input type="checkbox" value="10">10
                                            <input type="checkbox" value="11">11
                                        </div>
                                        <div class="imp hourList">
                                            PM:
                                            <input type="checkbox" value="12">12
                                            <input type="checkbox" value="13">13
                                            <input type="checkbox" value="14">14
                                            <input type="checkbox" value="15">15
                                            <input type="checkbox" value="16">16
                                            <input type="checkbox" value="17">17
                                            <input type="checkbox" value="18">18
                                            <input type="checkbox" value="19">19
                                            <input type="checkbox" value="20">20
                                            <input type="checkbox" value="21">21
                                            <input type="checkbox" value="22">22
                                            <input type="checkbox" value="23">23
                                        </div>
                                    </div>
                                    <div title="日">
                                        <div class="line">
                                            <input type="radio" checked="checked" name="day" onclick="everyTime(this)">
                                            日 允许的通配符[, - * / L W]</div>
                                        <div class="line">
                                            <input type="radio" name="day" onclick="unAppoint(this)">
                                            不指定</div>
                                        <div class="line">
                                            <input type="radio" name="day" onclick="cycle(this)">
                                            周期从
                                            <input class="numberspinner" style="width: 60px;" data-options="min:1,max:31" value="1"
                                                   id="dayStart_0">
                                            -
                                            <input class="numberspinner" style="width: 60px;" data-options="min:2,max:31" value="2"
                                                   id="dayEnd_0">
                                            日</div>
                                        <div class="line">
                                            <input type="radio" name="day" onclick="startOn(this)">
                                            从
                                            <input class="numberspinner" style="width: 60px;" data-options="min:1,max:31" value="1"
                                                   id="dayStart_1">
                                            日开始,每
                                            <input class="numberspinner" style="width: 60px;" data-options="min:1,max:31" value="1"
                                                   id="dayEnd_1">
                                            天执行一次</div>
                                        <div class="line">
                                            <input type="radio" name="day" onclick="workDay(this)">
                                            每月
                                            <input class="numberspinner" style="width: 60px;" data-options="min:1,max:31" value="1"
                                                   id="dayStart_2">
                                            号最近的那个工作日</div>
                                        <div class="line">
                                            <input type="radio" name="day" onclick="lastDay(this)">
                                            本月最后一天</div>
                                        <div class="line">
                                            <input type="radio" name="day" id="day_appoint">
                                            指定</div>
                                        <div class="imp dayList">
                                            <input type="checkbox" value="1">1
                                            <input type="checkbox" value="2">2
                                            <input type="checkbox" value="3">3
                                            <input type="checkbox" value="4">4
                                            <input type="checkbox" value="5">5
                                            <input type="checkbox" value="6">6
                                            <input type="checkbox" value="7">7
                                            <input type="checkbox" value="8">8
                                            <input type="checkbox" value="9">9
                                            <input type="checkbox" value="10">10
                                            <input type="checkbox" value="11">11
                                            <input type="checkbox" value="12">12
                                            <input type="checkbox" value="13">13
                                            <input type="checkbox" value="14">14
                                            <input type="checkbox" value="15">15
                                            <input type="checkbox" value="16">16
                                        </div>
                                        <div class="imp dayList">
                                            <input type="checkbox" value="17">17
                                            <input type="checkbox" value="18">18
                                            <input type="checkbox" value="19">19
                                            <input type="checkbox" value="20">20
                                            <input type="checkbox" value="21">21
                                            <input type="checkbox" value="22">22
                                            <input type="checkbox" value="23">23
                                            <input type="checkbox" value="24">24
                                            <input type="checkbox" value="25">25
                                            <input type="checkbox" value="26">26
                                            <input type="checkbox" value="27">27
                                            <input type="checkbox" value="28">28
                                            <input type="checkbox" value="29">29
                                            <input type="checkbox" value="30">30
                                            <input type="checkbox" value="31">31
                                        </div>
                                    </div>
                                    <div title="周">
                                        <div class="line">
                                            <input type="radio" checked="checked" name="week" onclick="everyTime(this)">
                                            周 允许的通配符[, - * / L #]</div>
                                        <div class="line">
                                            <input type="radio" name="week" onclick="unAppoint(this)">
                                            不指定</div>
                                        <div class="line">
                                            <input type="radio" name="week" onclick="startOn(this)">
                                            周期 从星期<input class="numberspinner" style="width: 60px;" data-options="min:1,max:7"
                                                         id="weekStart_0" value="1">
                                            -
                                            <input class="numberspinner" style="width: 60px;" data-options="min:2,max:7" value="2"
                                                   id="weekEnd_0"></div>
                                        <div class="line">
                                            <input type="radio" name="week" onclick="weekOfDay(this)">
                                            第<input class="numberspinner" style="width: 60px;" data-options="min:1,max:4" value="1"
                                                    id="weekStart_1">
                                            周 的星期<input class="numberspinner" style="width: 60px;" data-options="min:1,max:7"
                                                        id="weekEnd_1" value="1"></div>
                                        <div class="line">
                                            <input type="radio" name="week" onclick="lastWeek(this)">
                                            本月最后一个星期<input class="numberspinner" style="width: 60px;" data-options="min:1,max:7"
                                                           id="weekStart_2" value="1"></div>
                                        <div class="line">
                                            <input type="radio" name="week" id="week_appoint">
                                            指定</div>
                                        <div class="imp weekList">
                                            <input type="checkbox" value="1">1
                                            <input type="checkbox" value="2">2
                                            <input type="checkbox" value="3">3
                                            <input type="checkbox" value="4">4
                                            <input type="checkbox" value="5">5
                                            <input type="checkbox" value="6">6
                                            <input type="checkbox" value="7">7
                                        </div>
                                    </div>
                                    <div title="月">
                                        <div class="line">
                                            <input type="radio" checked="checked" name="mouth" onclick="everyTime(this)">
                                            月 允许的通配符[, - * /]</div>
                                        <div class="line">
                                            <input type="radio" name="mouth" onclick="unAppoint(this)">
                                            不指定</div>
                                        <div class="line">
                                            <input type="radio" name="mouth" onclick="cycle(this)">
                                            周期从
                                            <input class="numberspinner" style="width: 60px;" data-options="min:1,max:12" value="1"
                                                   id="mouthStart_0">
                                            -
                                            <input class="numberspinner" style="width: 60px;" data-options="min:2,max:12" value="2"
                                                   id="mouthEnd_0">
                                            月</div>
                                        <div class="line">
                                            <input type="radio" name="mouth" onclick="startOn(this)">
                                            从
                                            <input class="numberspinner" style="width: 60px;" data-options="min:1,max:12" value="1"
                                                   id="mouthStart_1">
                                            日开始,每
                                            <input class="numberspinner" style="width: 60px;" data-options="min:1,max:12" value="1"
                                                   id="mouthEnd_1">
                                            月执行一次</div>
                                        <div class="line">
                                            <input type="radio" name="mouth" id="mouth_appoint">
                                            指定</div>
                                        <div class="imp mouthList">
                                            <input type="checkbox" value="1">1
                                            <input type="checkbox" value="2">2
                                            <input type="checkbox" value="3">3
                                            <input type="checkbox" value="4">4
                                            <input type="checkbox" value="5">5
                                            <input type="checkbox" value="6">6
                                            <input type="checkbox" value="7">7
                                            <input type="checkbox" value="8">8
                                            <input type="checkbox" value="9">9
                                            <input type="checkbox" value="10">10
                                            <input type="checkbox" value="11">11
                                            <input type="checkbox" value="12">12
                                        </div>
                                    </div>
                                    <div title="年">
                                        <div class="line">
                                            <input type="radio" checked="checked" name="year" onclick="unAppoint(this)">
                                            不指定 允许的通配符[, - * /] 非必填</div>
                                        <div class="line">
                                            <input type="radio" name="year" onclick="everyTime(this)">
                                            每年</div>
                                        <div class="line">
                                            <input type="radio" name="year" onclick="cycle(this)">周期 从
                                            <input class="numberspinner" style="width: 90px;" data-options="min:2018,max:3000"
                                                   id="yearStart_0" value="2013">
                                            -
                                            <input class="numberspinner" style="width: 90px;" data-options="min:2021,max:3000"
                                                   id="yearEnd_0" value="2014"></div>
                                    </div>
                                </div>
                            </div>
                            <div data-options="region:'south',border:false" style="height:250px">
                                <fieldset style="border-radius: 3px; height: 220px;">
                                    <legend>表达式</legend>
                                    <table style="height: 100px;">
                                        <tbody>
                                        <tr>
                                            <td>
                                            </td>
                                            <td align="center">
                                                秒
                                            </td>
                                            <td align="center">
                                                分钟
                                            </td>
                                            <td align="center">
                                                小时
                                            </td>
                                            <td align="center">
                                                日
                                            </td>
                                            <td align="center">
                                                月<br />
                                            </td>
                                            <td align="center">
                                                星期
                                            </td>
                                            <td align="center">
                                                年
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                表达式字段:
                                            </td>
                                            <td>
                                                <input type="text" name="v_second" class="col" value="*" readonly="readonly" />
                                            </td>
                                            <td>
                                                <input type="text" name="v_min" class="col" value="*" readonly="readonly" />
                                            </td>
                                            <td>
                                                <input type="text" name="v_hour" class="col" value="*" readonly="readonly" />
                                            </td>
                                            <td>
                                                <input type="text" name="v_day" class="col" value="*" readonly="readonly" />
                                            </td>
                                            <td>
                                                <input type="text" name="v_mouth" class="col" value="*" readonly="readonly" />
                                            </td>
                                            <td>
                                                <input type="text" name="v_week" class="col" value="?" readonly="readonly" />
                                            </td>
                                            <td>
                                                <input type="text" name="v_year" class="col" readonly="readonly" />
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>Cron 表达式:</td>
                                            <td colspan="6">
                                                <input type="text" name="cron" style="width: 100%;" value="* * * * * ?" id="cron"/>
                                            </td>
                                            <td>
                                                <input type="button" value="反解析到UI " onclick="btnFan()"/>
                                            </td>
                                        </tr>
                                        <tr >
                                            <td colspan="8" >最近5次运行时间:</td>
                                        </tr>
                                        <tr>
                                            <td colspan="8" id="runTime">
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </fieldset>
                                <div style="text-align: center; margin-top: 5px;"></div>
                            </div>
                            <div></div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="submit()">提交</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<script src="/static/js/sweetalert.min.js"></script>
<script src="/static/js/switchery.min.js"></script>
<script src="/static/cron/js/jquery.easyui.min.js" type="text/javascript"></script>
<script src="/static/cron/js/cron.js" type="text/javascript"></script>

<script>
    $(document).ready(function () {
        initSwitch();
        $('#myModal').on('hidden.bs.modal', function () {
            $("form [name='id']").val('');
            $("form [name='name']").val('');
            $("form [name='func']").val('');
            resetCron();
        });
    });

    function initSwitch() {
        let elems = Array.prototype.slice.call(document.querySelectorAll('.js-switch'));
        elems.forEach(function(input) {
            let switchery = new Switchery(input, { size: 'small' });
            $(input).next().click(function () {
                let job_id = $(this).prev().attr('job_id');
                let checked = $(this).find('small').css('left').replace('px', '') > 0;
                checked = !checked; // 改变是异步的，刚好相反
                changeJobStatus(switchery, job_id, checked);
            });
        });
    }

    function resetCron() {
        $('#secondStart_0').numberspinner('setValue', 1);
        $('#secondEnd_0').numberspinner('setValue', 2);
        $('#secondStart_1').numberspinner('setValue', 0);
        $('#secondEnd_1').numberspinner('setValue', 1);

        $('#minStart_0').numberspinner('setValue', 1);
        $('#minEnd_0').numberspinner('setValue', 2);
        $('#minStart_1').numberspinner('setValue', 0);
        $('#minEnd_1').numberspinner('setValue', 1);

        $('#hourStart_0').numberspinner('setValue', 1);
        $('#hourEnd_0').numberspinner('setValue', 2);
        $('#hourStart_1').numberspinner('setValue', 0);
        $('#hourEnd_1').numberspinner('setValue', 1);

        $('#dayStart_0').numberspinner('setValue', 1);
        $('#dayEnd_0').numberspinner('setValue', 2);
        $('#dayStart_1').numberspinner('setValue', 1);
        $('#dayEnd_1').numberspinner('setValue', 1);
        $('#dayStart_2').numberspinner('setValue', 1);

        $('#mouthStart_0').numberspinner('setValue', 1);
        $('#mouthEnd_0').numberspinner('setValue', 2);
        $('#mouthStart_1').numberspinner('setValue', 1);
        $('#mouthEnd_1').numberspinner('setValue', 1);

        $('#weekStart_0').numberspinner('setValue', 1);
        $('#weekEnd_0').numberspinner('setValue', 2);
        $('#weekStart_1').numberspinner('setValue', 1);
        $('#weekEnd_1').numberspinner('setValue', 1);
        $('#weekStart_2').numberspinner('setValue', 1);

        $('#yearStart_0').numberspinner('setValue', 2018);
        $('#yearEnd_0').numberspinner('setValue', 2021);

        $('.tabs-panels input[name="second"]')[0].click();  // 重置为第一个radiobox
        $('.tabs-panels input[name="min"]')[0].click();
        $('.tabs-panels input[name="hour"]')[0].click();
        $('.tabs-panels input[name="day"]')[0].click();
        $('.tabs-panels input[name="week"]')[0].click();
        $('.tabs-panels input[name="mouth"]')[0].click();
        $('.tabs-panels input[name="year"]')[0].click();

        $('.tabs-panels input[type="checkbox"]').each(function() {
            if ($(this).is(':checked')) {
                $(this).click();
            }
        });
        $('.tabs li')[0].click();
    }

    function openDialog(_this, title) {
        $('#modal-title').html(title);
        if (title === '编辑') {
            $("form [name='id']").attr('disabled', true);
            restore(_this);
        } else {
            $("form [name='id']").attr('disabled', false);
        }
    }

    function restore(_this) {
        let triggerTemp = {};
        let id = $(_this).attr('job_id');
        let name = $(_this).attr('job_name');
        let func = $(_this).attr('job_func');
        let trigger = $(_this).attr('job_trigger');
        func = func.split(':')[1];
        trigger = trigger.split('[')[1].split(']')[0].split(',');
        trigger.forEach(t => {
            let [key, value] = t.split('=');
            key = key.replace(/"/g, '').trim();
            value = value.replace(/'/g, '').trim();
            triggerTemp[key] = value;
        });
        $("form [name='id']").val(id);
        $("form [name='name']").val(name);
        $("form [name='func']").val(func);
        let cron = (triggerTemp.second || '') + ' ' + (triggerTemp.minute || '') + ' ' + (triggerTemp.minute || '')
            + (triggerTemp.day || '') + ' ' + (triggerTemp.week || '')+ ' ' + (triggerTemp.month || '') + ' ' + (triggerTemp.year || '');
        $('#cron').val(cron);
        btnFan();
    }

    function submit() {
        let title = $('#modal-title').html();
        let params = {
            id: $("form [name='id']").val(),
            name: $("form [name='name']").val(),
            func: $("form [name='func']").val(),
            trigger: {
                second: $("table input[name='second']").val(),
                minute: $("table input[name='v_min']").val(),
                hour: $("table input[name='v_hour']").val(),
                day: $("table input[name='v_day']").val(),
                week: $("table input[name='v_week']").val(),
                month: $("table input[name='v_mouth']").val(),
                year: $("table input[name='v_year']").val()
            }
        };
        for (let key in params.trigger) {
            if (params.trigger[key] === '') {
                delete params.trigger[key];
            }
        }
        if (title === '新建') {
            createJob(params);
        } else {
            updateJob(params);
        }
    }

    function createJob(params) {
        $.ajax({
            type: "POST",
            url: "../../api/backend/scheduler/add",
            contentType: 'application/json',
            data: JSON.stringify(params),
            success: function (data) {
                if (data.stat == 200) {
                    $('#myModal').modal('hide');
                    swal({
                        title: '新建成功！',
                        text: data.msg,
                        icon: "success",
                        timer: 1000
                    });
                } else {
                    swal({
                        title: '新建失败！',
                        text: data.msg,
                        icon: "error",
                    });
                }
            },
            error: function (e) {
                swal({
                    title: '新建失败！',
                    icon: "error",
                });
            }
        })
    }

    function updateJob(params) {
        $.ajax({
            type: "POST",
            url: "../../api/backend/scheduler/replace",
            contentType: 'application/json',
            data: JSON.stringify(params),
            success: function (data) {
                if (data.stat == 200) {
                    $('#myModal').modal('hide');
                    swal({
                        title: '更新成功！',
                        text: data.msg,
                        icon: "success",
                        timer: 1000
                    });
                } else {
                    swal({
                        title: '更新失败！',
                        text: data.msg,
                        icon: "error",
                    });
                }
            },
            error: function (e) {
                swal({
                    title: '更新失败！',
                    icon: "error",
                });
            }
        })
    }

    function deleteJob(id) {
        swal({
            title: "操作确认",
            text: "删除后，您将无法恢复此文件！",
            icon: "warning",
            cancelButtonText: '确定',
            buttons: {
                cancel: {
                    text: "取消",
                    visible: true,
                },
                confirm: {
                    text: "确定",
                }
            },
            dangerMode: true,
        }).then(e => {
            if (e) {
                $.ajax({
                    type: "POST",
                    url: "../../api/backend/scheduler/remove",
                    contentType: 'application/json',
                    data: JSON.stringify({ id: id }),
                    success: function (data) {
                        if (data.stat == 200) {
                            swal({
                                title: '删除成功！',
                                text: data.msg,
                                icon: "success",
                                timer: 1000
                            });
                        } else {
                            swal({
                                title: '删除失败！',
                                text: data.msg,
                                icon: "error",
                            });
                        }
                    },
                    error: function (e) {
                        swal({
                            title: '删除失败！',
                            icon: "error",
                        });
                    }
                })
            }
        });
    }

    function changeJobStatus(switchery, id, checked) {
        let url = checked ? "../../api/backend/scheduler/start" : "../../api/backend/scheduler/stop";
        $.ajax({
            type: "POST",
            url: url,
            contentType: 'application/json',
            data: JSON.stringify({ id: id }),
            success: function (data) {
                if (data.stat !== 200) {
                    setSwitchery(switchery, !checked);
                    swal({
                        title: '修改状态失败！',
                        text: data.msg,
                        icon: "error",
                    });
                }
            },
            error: function (e) {
                setSwitchery(switchery, !checked);
                swal({
                    title: '修改状态失败！',
                    icon: "error",
                });
            }
        })
    }

    function setSwitchery(switchElement, checkedBool) {
        if ((checkedBool && !switchElement.isChecked()) || (!checkedBool && switchElement.isChecked())) {
            switchElement.setPosition(true);
            switchElement.handleOnchange(true);
        }
    }
</script>

</body>

</html>